<template>
  <div class="detail">
    <!-- 吸顶头部 -->
    <van-sticky :offset-top="0">
      <div class="detail_header">
        <div class="header_left mar">
          <van-icon name="wap-home-o" @click="toHome" />
        </div>
        <text class="header_title">网易严选</text>
        <div class="header_right mar">
          <van-icon name="search" class="header_right_search" @click="toSearch" />
          <van-icon name="shopping-cart-o" @click="toCart" />
        </div>
      </div>
    </van-sticky>

    <!-- 轮播图 -->

    <van-swipe class="detail_swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in bannerList" :key="item">
        <img class="swipe_img" :src="item" alt="">
      </van-swipe-item>
      <template #indicator="{ active, total }">
        <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
      </template>
    </van-swipe>

    <!-- 特价 -->
    <div class="detail_special_offer">
      <div class="special_offer_left">
        <div class="left_introduce">{{ banner.title }} | {{ banner.timePrefix }} 1天4小时</div>
        <DetailPrice color1="#fff" color2="red" :banner="bannerDetail"></DetailPrice>
      </div>
      <div class="special_offer_right">
        <img :src="banner.logoUrl" alt="">
      </div>
    </div>

    <!-- 商品标题和商品描述 -->
    <div class="detail_goodsInfo">
      <div class="goodsInfo_title">
        <div class="title_left">
          <div class="left_name">{{ detaildata.name }}</div>
          <div class="left_botm">
            <van-tag round type="primary" class="botm_preLogo" size="medium"
              v-if="simpleBrandInfo.ownType === 1">自营</van-tag>
            <div class="botm_preLogo2"><van-icon :name="simpleBrandInfo.logoUrl" size="10" /></div>
            <span>{{ simpleBrandInfo.title }}</span>
          </div>
        </div>
        <div class="title_right">
          <div class="right_comm">
            <div class="comm_num">99%</div>
            <dvi class="comm_name">好评率</dvi>
          </div>
          <div class="arrow">＞</div>
        </div>
      </div>
      <div class="goodsInfo_desc">
        <div class="desc_name">推荐理由</div>
        <div class="account_arrow"></div>
        <div class="arrow">
          <ul class="account_list">
            <li class="list_item" v-for="item in detaildata.recommendReason" :key="item">
              <div class="item_order">1</div>
              <div>{{ item }}</div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 类似广告 -->
    <div class="adve" v-if="welfareCardVO">
      <img class="adve_img" :src="welfareCardVO" alt="">
    </div>

    <!-- 商品信息 -->
    <div class="order_info">
      <!-- 弹出层 -->
      <div class="info_item">
        <ProductPopUp :skuMap="skuMap"></ProductPopUp>
      </div>
    </div>

    <!-- 选择对应的商品   选择规格或者是配送地址 -->
    <div class="goods_servers">
      <div class="servers_item">
        <ChoosePopUp ref="Choose" @chengeShopcart="chengeShopcart" type="请选择商品规格和数量" desc="" :isArrow="true" :attrValue="attrValue" v-model="shopNum"></ChoosePopUp>
        <ChoosePopUp type="限制：" :desc="detaildata.itemLimit" :isArrow="false" v-if="!!detaildata.itemLimit"></ChoosePopUp>

        <!-- 服务查看 -->
        <div class="server_look">
          <div class="look_title">服务：</div>
          <div class="look_list" @click="isShow(true)">
            <div class="list_item" v-for="(item, index) in policyList" :key="item.title" :class="{ active: index === 1 }">
              {{ item.title }}
            </div>
          </div>
          <van-icon name="arrow" />
          <!-- 弹窗 -->
          <van-popup v-model:show="serverShow" position="bottom" closeable :style="{ height: '45%' }">
            <div class="server_pop" style="position: relative;">
              <div class="list_title">服务</div>
              <div class="pop_list">
                <div class="list_item" v-for="(item, index) in policyList" :key="index">
                  <span :style="`color:${index === 1 ? 'red' : ''}`">{{ item.title }}</span>
                  <div>{{ item.content }}</div>
                </div>
              </div>
            </div>
          </van-popup>
        </div>
      </div>
    </div>

    <!-- 底部轮播图 -->
    <div class="footer_swipe">
      <van-swipe class="swipe_btom" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in detaildata.adBanners" :key="item.picUrl">
          <img :src="item.picUrl" alt="">
        </van-swipe-item>

        <template #indicator="{ active, total }">
          <div class="inddicator_active">
            <div class="show_item" v-for="(item, index) in total" :key="index">
              <span v-if="index === active" class="show_span"><van-icon size="10"
                  name="https://yanxuan-static.nosdn.127.net/hxm/tetris/base-mobile/sprite/carousel.png" /></span>
              <span v-else class="active_span"></span>

            </div>
          </div>
        </template>
      </van-swipe>
    </div>

    <!-- 评论 -->
    <Appraise :userInfo="detaildata.comments" v-if="!!userInfo.frontUserName" :count="detaildata.commentCount" :goodNum="detaildata.goodCmtRate"></Appraise>

    <!-- 品牌详情 -->
    <div class="detail_brand_detail">
      <div class="brand_detail_left">

        <img :src="brandInfo.picUrl" alt="">
      </div>
      <div class="brand_detail_right">
        <div class="right_header">
          <div class="header_name">{{ brandInfo.title }}</div>
          <div class="right_more"><van-icon name="arrow" /></div>
        </div>
        <div class="right_bottom">
          {{ brandInfo.desc }}
        </div>
      </div>
    </div>

    <!-- 商品参数 -->
    <div class="parameter">
      <h3 class="parameter_title">商品参数</h3>
      <div class="parameter_list">
        <div class="list_item" v-for="(item, index) in detaildata.attrList" :key="index">
          <div class="item_mintitle">{{ item.attrName }}</div>
          <div class="item_desc">{{ item.attrValue }}</div>
        </div>

      </div>
    </div>

    <!-- 商品详情图片 -->
    <div class="shopdetail" ref="shopdetail">
      <!-- 这是等待后端返回的数据进行渲染的 -->
      <h1></h1>
    </div>

    <!-- 常见问题 -->
    <div class="detail_question">
      <div class="question_title"><span>——</span>常见问题<span>——</span></div>
      <div class="question_item" v-for="(item, index) in issueList" :key="index">
        <div class="item_title"><span></span>{{ item.question }}</div>
        <p class="item_desc">{{ item.answer }}</p>
      </div>
    </div>

    <!-- 猜你喜欢 -->
    <div class="detail_recommend">
      <div class="recommend_title"><span>——</span>猜你喜欢<span>——</span></div>
      <div class="recommend_list">
        <div class="list_item" v-for="like in likeList" :key="like.id">
          <div class="item_img">
            <img :src="like.listPicUrl" alt="">
            <img class="seven" :src="like.topLogo.logoUrl" alt="">
          </div>
          <div class="item_header">
            <div class="header_logo">
              <img :src="img.logoUrl" alt="" v-for="img in like.preLogo" :key="img.logoUrl">
            </div>
            <div class="header_name">{{ like.name }}</div>
          </div>

          <div class="header_price">
            <span class="delivery_price">{{ like.finalPriceInfoVO.priceInfo.finalPrice.prefix }}</span>
            <span>￥</span>
            <span class="price_now">{{ like.finalPriceInfoVO.priceInfo.finalPrice.price }}</span>
            <span>￥{{ like.finalPriceInfoVO.priceInfo.counterPrice }}</span>
          </div>
          <van-tag style="margin: 4px 0;" type="danger" round v-if="like.finalPriceInfoVO.banner.content">{{ 
            like.finalPriceInfoVO.banner.content }}</van-tag>
          <div class="like_rush" v-else>
            <van-tag round rush_tejia type="danger" size="medium">特价</van-tag>
            <span class="rush_info">正在抢购中</span>
          </div>
        </div>
      </div>
    </div>
    <BottomSelection></BottomSelection>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
  name: 'Detail',
})
</script>

<script lang="ts" setup>
import { ref, onMounted, computed, onBeforeUpdate, watch } from 'vue'
import { useRouter } from 'vue-router'
import detailApi from '@/api/detail'
import DetailPrice from './components/DetailPrice/index.vue'
import ProductPopUp from './components/ProductPopUp/index.vue'
import ChoosePopUp from './components/ChoosePopUp/index.vue'
import BottomSelection from './components/BottomSelection/index.vue'
import Appraise from './components/Appraise/index.vue'
// 路由器对象
const router = useRouter()

// 用来接收数据的参数
const detaildata = ref<any>({})
const policyList = ref<any>([])
// 猜你喜欢列表
const likeList = ref<any>([])
// 这是详情图片的标签实例
const shopdetail = ref()

// 控制选择弹窗跳出
const Choose = ref()

// 控制弹窗
const serverShow = ref(false)

// 用来获取加入购物车的数量
const shopNum = ref(1)

// 加入购物车的数据收集
const shopCart = ref({})

// 控制弹窗的函数
function isShow(val: boolean) {
  serverShow.value = val
}
// 添加购物车的数量
function chengeShopcart(val:any,obj:any){
  console.log(val,obj);
  
  shopNum.value = Number(val)
}



// 用来发送请求的函数
async function getDetailData() {
  const res = await detailApi.getDetailData()
  detaildata.value = res.data.data.item
  policyList.value = res.data.data.policyList
}
// 获取猜你喜欢列表
async function getLikeList() {
  const res = await detailApi.getLikeList()
  // console.log(res);
  likeList.value = res.data.data.data.items

}
// 挂载的时候发送请求
onMounted(async () => {
  await getDetailData()
  await getLikeList()
  // 将详情的html字符串变成html标签
  shopdetail.value.innerHTML = imgList.value
})
// 获取图片html字符串
const imgList = computed(() => {
  return detaildata.value.itemDetail.detailHtml || ''
})
// 获取品牌详情信息
const brandInfo = computed(() => {
  return detaildata.value.brandInfo || {}
})
// 获取特价信息
const banner = computed(() => {
  return (detaildata.value.banner || {}).processBanner || {}
})
// 获取特价内部需要的信息
const bannerDetail = computed(() => {
  return ((detaildata.value.banner || {}).processBanner || {}).priceInfo || {}
})
// 将轮播图转成数组，并且切割掉不需要的部分
const bannerList = computed(() => {
  // 进行深拷贝，不然我们的原数据就会消失，不然直接删除因为引用地址相同。里面的数据还要需要用的
  let arr = JSON.parse(JSON.stringify(detaildata.value.itemDetail || {}))
  delete arr.videoInfo
  delete arr.detailHtml
  let obj = arr
  let itemDetail = []
  for (let i in obj) {
    itemDetail.push(obj[i])
  }
  return itemDetail
})

// 计算规格需要的数据
const skuMap = computed(() => {
  return detaildata.value?.skuFreight || {}
})

// 计算类似广告部分
const welfareCardVO = computed(() => {
  return detaildata.welfareCardVO?.picUrl || ''
})

// 计算出我们的描述下面的logo和品牌名
const simpleBrandInfo = computed(() => {
  return detaildata.value.simpleBrandInfo || {}
})

// 常见问题列表
const issueList = computed(() => {
  return detaildata.value.issueList || []
})
// 计算特价的剩余时间
// const tejiaTime = computed(async () => {
//   let starttime = new Date().getTime()
//   let endtime = banner.value.endTimeGap
//   let time = endtime - starttime
//   console.log(time / (24 * 60 * 60 * 1000));
//   return
// })

// 获取评论的信息，但是不是所有的商品都有评论
const userInfo = computed(()=>{
    return (detaildata.value.comments || [])[0] || {}
})
// 获取点击选择之后的选择商品信息
const attrValue = computed(()=>{
  let item = detaildata.value || {}
  // console.log(item);
  return {
    price:item.price,
    promotionDesc:item.promotionDesc,
    primaryPicUrl:item.primaryPicUrl,
    skuSpecList:(item.skuSpecList || [])[0] || {}
  }
})

// 点击上方粘性图标返回首页
function toHome() {
  router.push({
    path: '/home'
  })
}

// 点击上方粘性图标跳转购物车
function toCart() {
  router.push({
    path: '/shopcart'
  })
}
// 点击上方粘性图标跳转搜索
function toSearch() {
  router.push({
    path: '/search'
  })
}


</script>

<style scoped>
.detail {
  width: 100%;
  background-color: #ddd;
}

/* 固定头部 */
.detail_header {
  display: flex;
  justify-content: space-between;
  font-size: 30px;
  border-bottom: 1px solid #ccc;
  align-items: center;
  background-color: #fff;
}

.detail_header .header_right {
  /* flex: 1; */
  display: flex;
  justify-content: flex-end;
}

.header_right .header_right_search {
  margin-right: 10px;
}

.detail_header .mar {
  padding: 6px 10px 3px;
}

.header_title {
  font-size: 20px;
  font-weight: 600;
  margin-left: 34px;
}

/* 轮播图 */

.detail_swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  width: 375px;
  height: 375px;
  text-align: center;
}

.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  color: #fff;
  background: rgba(0, 0, 0, 0.1);
}

.swipe_img {
  width: 100%;
  height: 100%;
}


/* 特价 */
.detail_special_offer {
  background-color: #f00;
  color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 10px 14px;
}

.detail_special_offer .special_offer_left {
  flex: 1;
}

.special_offer_left .left_introduce {
  font-size: 12px;
  margin-bottom: 10px;
}


.detail_special_offer .special_offer_right {
  align-self: center;
  width: 70px;
  height: 40px;
}

.detail_special_offer .special_offer_right img {
  width: 100%;
  height: 100%;
}

/* 商品描述 */
.detail_goodsInfo {
  padding: 15px;
  padding-right: 0;
  background-color: #fff;
}

.detail_goodsInfo .goodsInfo_title {
  display: flex;
  /* flex-wrap: wrap; */
}

/* .goodsInfo_title .title_left{

} */
.goodsInfo_title .left_name {
  font-size: 16px;
  font-weight: bold;
  padding-bottom: 15px;
}

.goodsInfo_title .left_botm {
  display: flex;
  align-items: center;
  color: #aaa;
}

.left_botm .botm_preLogo {
  /* width: 28px;
  height: 14px; */
  text-align: center;
  background-color: red;
  color: #fff;
  align-self: center;
}

.left_botm .botm_preLogo2 {
  margin: 0 6px;
}

.title_right {
  width: 120px;
  text-align: center;
  display: flex;
  justify-content: center;
}

.comm_num {
  font-size: 16px;
  font-weight: bold;
  color: red;
  padding-bottom: 5px;
}

.comm_name {
  font-size: 10px;
  color: #bbb;
}

.title_right .arrow {
  position: relative;
  top: 14px;
  padding-left: 6px;
}

.goodsInfo_desc {
  position: relative;
  margin-top: 6px;
  margin-right: 15px;
}

.goodsInfo_desc .desc_name {
  margin-bottom: 10px;
}

.goodsInfo_desc .account_arrow {
  position: absolute;
  top: 12px;
  left: 10px;
  border: 8px solid transparent;
  border-bottom-color: #e6e6e6;
}

.goodsInfo_desc .account_list {
  background-color: #fafafa;
  border: 1px solid #e6e6e6;
  padding: 10px;
  box-sizing: border-box;
}

.account_list .list_item {
  display: flex;
  margin-top: 6px;
  align-items: center;
}

.account_list .list_item .item_order {
  width: 10px;
  height: 10px;
  text-align: center;
  border: 2px solid red;
  border-radius: 50%;
  color: red;
  font-size: .24rem;
  font-weight: bold;
  margin-right: 6px;
}

/* 广告 */
.adve {
  width: 100%;
  background-color: #e6e6e6;
  /* padding: 10px 0; */
}

.adve_img {
  width: 100%;
}

/* 信息弹窗 */
.info_item {
  background-color: #fff;
}

/* 选择商品规格和数量  ----- 商品服务 */
.goods_servers {
  margin-top: 10px;
  /* padding-left: 15px; */
  background-color: #fff;
}


/* 底部轮播图 */
.swipe_btom .van-swipe-item {
  position: relative;
  color: #fff;
  font-size: 20px;
  height: 100px;
  text-align: center;
  background-color: #eee;
  padding: 10px 0;
}

.swipe_btom .van-swipe-item img {
  width: 100%;
  height: 100%;
}

.inddicator_active {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
}

.inddicator_active .show_item .active_span {
  display: inline-block;
  width: 6px;
  height: 6px;
  border: 1px solid red;
  border-radius: 50%;
  margin-right: 6px;
}

.inddicator_active .show_item .show_span {
  margin-right: 6px;
  position: relative;
  top: 2px;
}


/* 品牌详情 */
.detail_brand_detail {
  /* margin: 15px 0; */
  padding-bottom: 10px;
  background-color: #fff;
  display: flex;
  align-items: center;
}

.detail_brand_detail .brand_detail_left {
  width: 90px;
  height: 88px;
  line-height: 88px;
  text-align: center;
  font-size: 0;

}

.detail_brand_detail .brand_detail_left img {
  width: 48px;
  height: 48px;
  vertical-align: middle;
}

.detail_brand_detail .brand_detail_right {
  flex: 1;
}

.brand_detail_right .right_header {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.brand_detail_right .right_header .header_name {
  font-size: 18px;
  font-weight: bold;
  margin: 20px 0 10px 8px;
}

.brand_detail_right .right_header .right_more {
  margin-right: 15px;
  font-size: 16px;
  color: #aaa;
}

.brand_detail_right .right_bottom {
  font-size: 12.5px;
  color: #333;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 商品参数 */
.parameter {
  margin-top: 10px;
  padding: 15px;
  background-color: #fff;
}

.parameter .parameter_title {
  font-weight: normal;
  font-size: 14px;
  margin: 14px 0 12px;
}

.parameter .parameter_list .list_item {
  /* height: 32px; */
  /* line-height: 32px; */
  padding: 10px;
  display: flex;
  border-top: 1px #333 dashed;
}

.parameter .parameter_list .list_item .item_mintitle {
  color: #333;
  flex: 2;
}

.parameter .parameter_list .list_item .item_desc {
  flex: 6;
  color: #aaa;
}

/* 常见问题 */
.detail .detail_question {
  background-color: #fff;
  padding: 0 15px 15px;
}

.detail_question .question_title {
  /* height: 50px; */
  padding: 27px 0;
  text-align: center;
  font-size: 16px;
}

.detail_question .question_title span {
  color: #ccc;
  margin: 0 10px;
}

/* 下方的列表 */
.detail_question .question_item {
  padding-bottom: 13px;
}

.detail_question .question_item .item_title {
  font-size: 14px;
}

.detail_question .question_item .item_title span {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: red;
  border-radius: 50%;

}

.detail_question .question_item .item_desc {
  padding-left: 8px;
  margin-top: 8px;
  font-size: 14px;
  color: #888;
}

/* 猜你喜欢 */
.detail_recommend {
  background-color: #fff;
}

.detail_recommend .recommend_title {
  font-size: 16px;
  text-align: center;
  padding: 27px 0;
}

.detail_recommend .recommend_title span {
  color: #ccc;
  margin: 0 10px;
}

.detail_recommend .recommend_list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.recommend_list .list_item {
  width: 172.5px;
  padding: 0 10px 26px 5px;
}

.recommend_list .list_item .item_img {
  position: relative;
  width: 172.5px;
  height: 172.5px;
}

.recommend_list .list_item .item_img img {
  width: 100%;
  height: 100%;
}
.seven{
  position: absolute;
  right: 6px;
  top: 6px;
  display: block;
  width: 52.5px !important;
  height: 27px !important;
}

.recommend_list .list_item .item_header {
  display: flex;
  margin-top: 6px;
}

.list_item .item_header .header_logo {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  /* background-color: black; */
  margin-right: 5px;
}
.list_item .item_header .header_logo img{
  width: 100%;height: 100%;
}

.header_price {
  padding: 6px 0;
  color: red;
  font-weight: bold;
  font-size: 13px;
}

.header_price .price_now {
  font-size: 20px;
}

.header_price span:last-of-type {
  color: #aaa;
  text-decoration: line-through;
}

.recommend_list .list_item .like_rush {
  display: flex;
  background-color: #FFE9EB;
  height: 23px;
  line-height: 23px;
  color: #fff;
  font-weight: bold;
  border-radius: 10px;
}

.list_item .like_rush .rush_tejia {
  color: #fff;
  --van-tag-font-size: 12px;
  height: 100%;
  width: 30px;
  line-height: 23px;
}

.list_item .like_rush .rush_info {
  color: red;
  margin-left: 10px;
  line-height: 23px;
}


/* 详情的图片 */
.shopdetail {
  font-size: 0;
  width: 100%;
}

.shopdetail p {
  width: 100%;
  display: inline-block;
}

.shopdetail p img {
  display: block;
  width: 375px;
}



/* 服务查看 */
.server_look {
  display: flex;
  padding: 15px;
  font-size: 14px;
  align-items: center;
}

.server_look .look_list {
  flex: 1;
  font-size: 10px;
  display: flex;
  flex-wrap: wrap;
}

.server_look .look_list .list_item::after {
  position: absolute;
  left: 0;
  top: 7px;
  content: '';
  background-color: red;
  border-radius: 50%;
  width: 4px;
  height: 4px;
}

.server_look .look_list .list_item {
  position: relative;
  padding-left: 8px;
  margin: 0 20px 4px 8px
}

.server_look .look_list .list_item.active {
  color: red;
}

.server_pop {
  width: 375px !important;
}



.server_pop .list_title {
  padding: 16px;
  font-size: 16px;
  text-align: center;
  height: 28px;
  line-height: 28px;
  border-bottom: 1px solid #ccc;
}

.pop_list {
  padding: 26px 15px;
}

.pop_list .list_item span {
  position: relative;
  padding-left: 10px;
  color: #333;
  display: inline-block;
  margin-bottom: 4px;
}

.pop_list .list_item span::after {
  position: absolute;
  left: 0;
  top: 6px;
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: red;
}

.pop_list .list_item {
  font-size: 14px;
  color: #777;
}

.pop_list .list_item:not(:first-of-type) {
  margin-top: 22px;
}
</style>